<template>
    <el-date-picker
            v-model="model"
            class="dateRangePicker"
            :type="type"
            align="right"
            unlink-panels
            range-separator="-"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            :picker-options="pickerOptions"
            @change="changed"
            :fromProp="fromProp"
            :toProp="toProp"
             size="small"
    >
    </el-date-picker>
</template>
<script>
    export default {
        name: 'XDDateRangePicker',
        props: ['type', 'label', 'fromProp', 'toProp'],  //type: datetimerange, daterange
        data() {
            return {
                model: [],
                pickerOptions: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30 * 3);
                            picker.$emit('pick', [start, end]);
                        }
                    },
                        {
                            text: '最近半月',
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30 * 6);
                                picker.$emit('pick', [start, end]);
                            }
                        },
                        {
                            text: '最近一年',
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30 * 12);
                                picker.$emit('pick', [start, end]);
                            }
                        },
                    ]
                },
            }
        },
        methods: {
            changed() {
                let from = this.dateTimeFilter(this.model[0])
                let to = this.dateTimeFilter(this.model[1])
                let obj = {}
                obj[this.fromProp] = from
                obj[this.toProp] = to
                if (this.type == 'daterange') {
                    this.$emit('change', obj)
                }else{
                    this.$emit('change', obj)
                }
            },
            // date转换
            dateFilter(input) {
                var d = new Date(input);
                var year = d.getFullYear();
                var month =
                    d.getMonth() < 9 ? "0" + (d.getMonth() + 1) : "" + (d.getMonth() + 1);
                var day = d.getDate() < 10 ? "0" + d.getDate() : "" + d.getDate();
                return year + "-" + month + "-" + day;
            },
            // datetime转换
            dateTimeFilter(input) {
                var d = new Date(input);
                var year = d.getFullYear();
                var month =
                    d.getMonth() < 9 ? "0" + (d.getMonth() + 1) : "" + (d.getMonth() + 1);
                var day = d.getDate() < 10 ? "0" + d.getDate() : "" + d.getDate();
                var hh = d.getHours() < 10 ? "0" + d.getHours() : "" + d.getHours();
                var mm = d.getMinutes() < 10 ? "0" + d.getMinutes() : "" + d.getMinutes();
                var ss = d.getSeconds() < 10 ? "0" + d.getSeconds() : "" + d.getSeconds();
                return year + "-" + month + "-" + day + " " + hh + ":" + mm + ":" + ss;
            },
        },
        created() {
        }
    }
</script>